<template>
  <div class="home">
    <el-container style="height:100%">
      <el-aside width="auto">
        <el-menu
          background-color="#2C3B48"
          text-color="#fff"
          active-text-color="#ffd04b"
          :collapse="ctlCollapse"
        >
          <el-menu-item index="1" style="height:80px;text-align:left">
            <i class="iconfont iconlundu"
              style="font-size:40px;line-height:80px;"></i>
            <span
              style="font-size:36px;line-height:80px;"
            >&nbspferitle</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-pie-chart _icon"></i>
            <span slot="title">数据中心</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-user _icon"></i>
            <span slot="title">用户中心</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-s-claim _icon"></i>
            <span slot="title">管理中心</span>
          </el-menu-item>
          <el-menu-item index="5">
            <i class="el-icon-s-opportunity _icon"></i>
            <span slot="title">精彩探索</span>
          </el-menu-item>
          <el-menu-item index="6">
            <i class="el-icon-message _icon"></i>
            <span slot="title">邮件管理</span>
          </el-menu-item>
          <el-menu-item index="7">
            <i class="el-icon-setting _icon"></i>
            <span slot="title">系统设置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-button
            circle
            @click="ctlCollapseFunc" :icon="ctlBmIcon"
            style="float:left;position:relative;top:15%;"></el-button>
          <el-autocomplete
            popper-class="my-autocomplete"
            v-model="state"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
            style="float:left;position:relative;top:15%;left:2vw;">
            <i
              class="el-icon-search el-input__icon"
              slot="suffix"
              @click="handleIconClick">
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
          <el-dropdown :hide-on-click="false"
            style="float:right;position:relative;
                  height:100%;width:150px;"
          >
            <span class="el-dropdown-link user_plot">
              <img :src="userdata.img" alt="">
              <span>Rowen</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item disabled>双皮奶</el-dropdown-item>
              <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button
            circle
            icon="el-icon-s-operation"
            style="float:right;position:relative;top:15%;right:1vw"></el-button>
          <el-button
            circle
            icon="el-icon-message-solid"
            style="float:right;position:relative;top:15%;right:2vw"></el-button>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer>
          <div class="footer_span">
            <span>辽字备案xxx号</span>
            <el-divider direction="vertical"></el-divider>
            <span>Rowen</span>
            <el-divider direction="vertical"></el-divider>
            <span>feritle</span>
            <el-divider direction="vertical"></el-divider>
            <span>c2537237@sina.cn</span>
          </div>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    HelloWorld
  },
  data () {
    return {
      ctlCollapse: false,
      ctlBmIcon: 'el-icon-s-unfold',
      restaurants: [],
      state: '',
      userdata:{img:require("../../public/img/1535964071438.jpg")},
    }
  },
  methods:{
    ctlCollapseFunc:function(){
      if(this.ctlCollapse === true)
      {
        this.ctlCollapse = false;
        this.ctlBmIcon = 'el-icon-s-unfold' 
      } 
      else{
        this.ctlCollapse = true;
        this.ctlBmIcon = 'el-icon-s-fold'
      } 
      console.log(this.ctlBmIcon)
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
      ]
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    }
    
    
  },
  mounted() {
    this.restaurants = this.loadAll();
  }
}
</script>

<style lang="scss" scoped>
  .home{
    width:100%;
    height:100%;
  }
  .el-aside{
    z-index: 200;
    background: #2C3B48;
  }
  .el-header{
    z-index: 200;
    background: #fff;
  }
  .el-main{
    padding: 0;
    background: #ddd;
  }
  .el-menu{
    font-weight: 500;
    border:0 !important;
  }
  .el-menu-item{
    font-size: 16px;
    text-align: left;
    min-width: 200px;
    width:10vw;
  }
  ._icon{
    font-size: 22px !important;
  }
  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .addr {
        font-size: 12px;
        color: #b4b4b4;
      }

      .highlighted .addr {
        color: #ddd;
      }
    }
  }
  .user_plot{
    display: block;
    width: 100%;
    height:100%;
    position: relative;
    img{
      height: 40px;
      width: 40px;
      position: relative;
      top:10px;
      float: left;
      border-radius: 5px;
    }
    span{
      position: relative;
      display: block;
      line-height: 60px;
      height:100%;
      width: 90px;
      float: left;
      font-size:22px;
    }
    i{
      line-height: 60px;
    }
  }
  .footer_span{
    line-height: 60px;
  }
</style>
